<template>
    <div class="row head">
        <q-separator vertical size="3px" class="leftLine bg-primary" />
        <span class="q-ml-md name">{{title}}</span>
        <q-space />
        <q-icon
            name="bi-plus-square-dotted"
            size="18px"
            color="primary"
            style="margin-top:13px;margin-right:5px;"
            @click="add"
        />
        <div class="q-mr-md cursor-pointer" style="color:#333333;" @click="add">添加</div>
        <q-icon
            name="mdi-filter-minus-outline"
            size="18px"
            style="color:#BEBEBE;margin-top:13px;margin-right:5px;"
            :color="colorShow ? 'primary' : ''"
        />
        <div class="q-mr-sm cursor-pointer" style="color:#333333;" @click="searchShowClick">筛选</div>
        <q-btn
            flat
            round
            dense
            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
            @click="toggleFullscreen"
            class="q-mr-sm"
        />
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapGetters } from 'vuex';
export default defineComponent({
    name: 'haedTitle',
    computed: {
        ...mapGetters(['themeColor', 'device']),
    },
    props:['title'],
    data() {
        return {
            rotate: false,
            colorShow: false,
        }
    },
    watch: {
        '$q.fullscreen.isActive'(val) {
            this.$route.path == '/standing' && this.device == 'mobile' ? this.rotate = val : this.rotate = false;
        },
    },
    methods: {
        searchShowClick() {
            this.colorShow = !this.colorShow;
            this.$parent.searchShowClick();
        },
        add() {
            this.$parent.add();
        },
        /**
         * 全屏
         */
        toggleFullscreen() {
            this.$parent.toggleFullscreen();
        }
    },
})
</script>

<style lang="scss" scoped>
</style>

